<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>demo4 实现一个todolist 增删改查/勾选</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>

  <!-- 所有 React 组件必须写在同一个 type="text/babel" 的 script 标签中 -->
  <script type="text/babel">

    let nextId = 3;
    const initialTasks = [
      {id: 0, text: '参观卡夫卡博物馆', done: true},
      {id: 1, text: '看木偶戏', done: false},
      {id: 2, text: '列侬墙图片', done: false}
    ];

    // 组件 1: 任务列表Item
    function TaskItem({task, editingId, onEdit, onRemove, onUpdate, onReset, onChangeName, onChangeDone}) {
      return (
        <li key={task.id}>
          <input type="checkbox" checked={task.done} onChange={(e) => onChangeDone(task.id, e.target.checked)} />
          {editingId === task.id ? (
            <>
              <input type="text" value={task.text} onChange={(e) => onChangeName(task.id, e)} />
              <button onClick={() => onUpdate(task.id)}>保存</button>
              <button onClick={onReset}>取消</button>
            </>
          ) : (
            <>
              <span style={{textDecoration: task.done ? 'line-through' : 'none'}}>
                {task.text}
              </span>
              <button onClick={() => onEdit(task.id)}>编辑</button>
            </>
          )}
          <button onClick={() => onRemove(task.id)}>删除</button>
        </li>
      );
    }


    // 组件 2: 主应用
    function MyApp() {

      const [taskName, setTaskName] = React.useState('');
      const [tasks, setTasks] = React.useState(initialTasks);
      const [editingId, setEditingId] = React.useState(null);

      function add(e) {
        console.log(e);
        if (!taskName.trim()) return;
        const newTask = {id: nextId++, text: taskName, done: false};
        setTasks([...tasks, newTask])
        setTaskName(''); // 清空输入框
      }

      function onChangeTaskName(e) {
        setTaskName(e.target.value);
      }
      function onChangeName(id, e) {
        console.log(e);
        const newTasks = tasks.map(task =>
          task.id === id ? {...task, text: e.target.value} : task
        )
        setTasks(newTasks);
      }
      function onChangeDone(id, e) {
        const newTasks = tasks.map(task =>
          task.id === id ? {...task, done: e.target.checked} : task
        )
        setTasks(newTasks);
      }
      function onEdit(id) {
        setEditingId(id);
      }

      function onRemove(id) {
        const newTasks = tasks.filter(task => task.id !== id);
        setTasks(newTasks);
      }
      function onUpdate(id) {
        setEditingId(null);
      }
      function onReset() {
        setEditingId(null);
      }

      return (
        <>
          <h1>Hello, world!</h1>
          <section className="contact-list">
            <div>
              <input type="text" placeholder="Search..." value={taskName} onChange={onChangeTaskName} onKeyDown={(e) => {
                if (e.key === 'Enter') add(e)
              }} />
              <button onClick={add}>添加</button>
            </div>
            <ul>
              {tasks.map(task => (
                <TaskItem
                  key={task.id}
                  task={task}
                  editingId={editingId}
                  onEdit={onEdit}
                  onRemove={onRemove}
                  onUpdate={onUpdate}
                  onReset={onReset}
                  onChangeName={onChangeName}
                  onChangeDone={onChangeDone}
                />
              ))}
            </ul>
          </section>
        </>
      )
    }

    const container = document.getElementById('root');
    const root = ReactDOM.createRoot(container);
    root.render(<MyApp />);

  </script>

</body>

</html>